<template>
  <div>
    <el-row type="flex" justify="space-between">
      <el-col>
        <el-button type="primary" @click="clickCreat">添加活动</el-button>
      </el-col>
      <el-col>
        <div style="display: flex; justify-content: flex-end">
          <el-input
            v-model="form.search"
            clearable
            style="width: 300px; margin-left: 15px"
            placeholder="搜索标题、正文"
            class="input-with-select"
            @clear="clear"
          >
            <el-button
              slot="append"
              style="
                background-color: #45a321;
                color: #fff;
                border-radius: 0;
                border: 1px solid #45a321;
              "
              @click="searchVal"
            >搜索</el-button>
            <i slot="prefix-icon" class="el-icon-search" />
          </el-input>
        </div>
      </el-col>
    </el-row>
    <el-table align="center" :data="list.list" border style="width: 100%; margin: 20px 0">
      <el-table-column align="center" label="封面图">
        <template slot-scope="scope">
          <div style="position: relative; width: 100%; padding-top: 56%">
            <img
              :src="scope.row.tpic"
              alt
              style="
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0px;
                top: 0px;
              "
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="title" label="标题" />
      <!-- <el-table-column align="center" prop="active_time" label="链接">
      </el-table-column>-->
      <el-table-column align="center" prop="myorder" label="排序" />
      <el-table-column align="center" label="名单">
        <template slot-scope="scope">
          <el-button type="primary" @click="viewRoll(scope.row.id)">查看名单</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button class="editText" type="text" @click="clickEdit(scope.row.id)">修改</el-button>
          <el-button class="deletText" type="text" @click="deletUser(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        :current-page="list.page"
        :page-size="list.size"
        layout="total, prev, pager, next, jumper"
        :total="parseInt(list.count)"
        align="left"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      title="中心活动"
      :visible.sync="dialogVisible"
      width="50%"
      top="10.8vh"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">封面图</p>
          <div class="left_w s_flex s_align_items">
            <div style="margin-right: 20px">
              <el-upload
                class="upload-demo"
                :on-success="onSuccess"
                :show-file-list="false"
                :action="`${VUE_APP_BASE_API}/v1/index/upload `"
              >
                <!-- -->
                <el-button type="primary">上传封面图（240px*135px）</el-button>
              </el-upload>
            </div>
            <el-button v-if="form.tpic" type="danger" @click="form.tpic = ''">删除</el-button>
          </div>
        </div>
        <div v-if="form.tpic" class="news_mrt">
          <img style="width: 15%" :src="form.tpic" />
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">标题</p>
          <div class="left_w">
            <el-input v-model="form.title" placeholder="请输入内容" />
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">活动开始时间</p>
          <div class="left_w">
            <el-date-picker
              v-model="form.start_time"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">活动结束时间</p>
          <div class="left_w">
            <el-date-picker
              v-model="form.end_time"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">活动地点</p>
          <div class="left_w">
            <el-input v-model="form.active_pos" placeholder="请输入活动地点" />
          </div>
        </div>

        <!-- <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">活动状态</p>
          <div class="left_w">
            <el-select v-model="form.active_status" placeholder="请选择活动状态">
              <el-option
                v-for="item in optionsStatus"
                :key="item.key"
                :label="item.name"
                :value="item.key"
              />
            </el-select>
          </div>
        </div> -->

        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">是否在主页展示</p>
          <div class="left_w">
            <el-select v-model="form.is_show" placeholder="是否在主页展示">
              <el-option
                v-for="item in optionsHome"
                :key="item.key"
                :label="item.name"
                :value="item.key"
              />
            </el-select>
          </div>
        </div>
        <!-- <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">类型</p>
          <el-select v-model="form.type" placeholder="请选择">
            <el-option
              v-for="item in type"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>-->
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">排序</p>
          <div class="left_w">
            <el-input v-model="form.myorder" placeholder="请输入内容" />
          </div>
        </div>
        <div class="news_mrt">
          <p>正文</p>
          <Editor :id="`test6`" v-model="form.content" style="margin-top: 20px" />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>

    <el-dialog title :visible.sync="viewForm" :close-on-click-modal="false">
      <div slot="title" style="display: flex;">
        <span
          style="
            line-height: 24px;
            font-size: 18px;
            color: #303133;
            margin-right: 20px;
          "
        >报名表单</span>
        <el-button type="success" style="padding: 10px 35px" @click="exportExcel">导出</el-button>
      </div>

      <!-- <el-button type="success">导出</el-button> -->
      <el-descriptions
        :title="applyFormData.title"
        :column="1"
        :content-style="{ color: '#409eff' }"
        :label-style="{ color: '#409eff' }"
      >
        <el-descriptions-item label="时间">{{ applyFormData.active_time }}</el-descriptions-item>
        <el-descriptions-item label="地点">{{ applyFormData.active_pos }}</el-descriptions-item>
        <el-descriptions-item label="报名人数">{{ applyFormData.active_num }}</el-descriptions-item>
      </el-descriptions>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="phone" label="电话" width="180" />
        <el-table-column prop="create_time" label="报名时间" />
        <el-table-column prop="active_num" label="人数" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { VUE_APP_BASE_API } from "@/config.js";
import {
  activityList, 
  activityAdd,
  activityEdit,
  activityDel,
  signList,
  activityInfo,
  getTypes,
} from "@/api/adminWeb";
import Editor from "@/components/Editor";
import { ActivityDerive } from "@/api/admin";
export default {
  components: {
    Editor,
  },
  data () {
    return {
      tableData: [],
      viewForm: false,
      VUE_APP_BASE_API,
      id: null,
      list: [],
      dialogVisible: false,
      applyFormData: {},
      form: {
        active_id: "",
        title: "",
        active_time: "",//原来的时间
        start_time: "",//开始时间
        end_time: "",//结束时间
        content: "",
        tpic: "",
        search: "",
        myorder: "",
        is_show: "",
        active_status: "",
      },
      contentDesc: "",
      clearDesc: 0,
      fileList: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick (picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick (picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick (picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      optionsHome: [
        {
          key: 1,
          name: "是",
        },
        {
          key: 2,
          name: "否",
        },
      ],
      type: [],
      optionsStatus: [
        {
          key: 1,
          name: "报名中",
        },
        {
          key: 2,
          name: "已结束",
        },
      ],
    };
  },
  mounted () {
    this.getLIst();
    this.getListType();
  },
  methods: {
    exportExcel () {
      ActivityDerive({ active_id: this.id }).then((res) => {
        const blob = new Blob([res.data]);
        const fileName = "报名表单.xls";
        const elink = document.createElement("a");
        elink.download = fileName;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
      });
    },
    async viewRoll (id) {
      this.id = id
      const res = await signList({ active_id: id });
      this.tableData = res.list.list;
      this.applyFormData = res.list;
      // console.log(res, '>>>>>>>>> 222');
      this.viewForm = true;
      // console.log(this.form);
      // console.log(this.json_data);
    },
    async getListType () {
      try {
        this.type = await getTypes();
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    searchVal () {
      this.getLIst();
    },
    clickCreat () {
      this.dialogVisible = true;
    },
    async clickEdit (id) {
      try {
        this.form = await activityInfo({
          active_id: id,
        });
        this.contentDesc = this.form.content;
        this.dialogVisible = true;
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    deletUser (id) {
      this.$confirm("此操作将删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await activityDel({
              active_id: id,
            });
            this.getLIst();
            this.$message({
              type: "success",
              message: "删除成功",
            });
          } catch (error) {
            this.$message.error(error.message);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    clear () {
      this.getLIst();
    },
    handleClose () {
      this.clearDesc = 1;
      this.dialogVisible = false;
      this.form = {
        myorder: "",
        is_show: "",
        active_time: "",
        active_pos: "",
        title: "",
        tpic: "",
        content: "",
        active_status: "",
      };
    },
    async onSuccess (response, file, fileList) {
      if (response) {
        // console.log(response.data.url);
        this.form.tpic = response.data.url;
        this.$nextTick(() => {
          this.form.tpic = response.data.url;
        });
        this.$message.success("上传成功");
      }
    },
    async getLIst () {
      try {
        this.list = await activityList({
          keyword: this.form.search,
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    descVal (val) {
      this.form.content = val;
    },
    async save () {
      try {
        const {
          myorder,
          is_show,
          active_time,
          active_pos,
          start_time,
          end_time,
          title,
          tpic,
          content,
          active_status,
        } = this.form;
        if (this.form.id) {
          await activityEdit({
            active_id: this.form.id,
            myorder,
            is_show,
            active_time,
            start_time,
            end_time,
            deadline_time:end_time,
            active_pos,
            title,
            tpic,
            content,
            active_status,
            num: 0,
          });
          this.getLIst();
          this.$message.success("添加成功");
          this.dialogVisible = false;
          this.clearDesc = 1;
          this.form = {
            myorder: "",
            is_show: "",
            active_pos: "",
            title: "",
            tpic: "",
            content: "",
            active_time: "",
            active_status: "",
          };
        } else {
          await activityAdd({
            myorder,
            is_show,
            active_pos,
            start_time,
            deadline_time:end_time,
            end_time,
            title,
            tpic,
            content,
            active_time,
            num: 0,
            active_status,
          });
          this.clearDesc = 1;
          this.getLIst();
          this.$message.success("添加成功");
          this.dialogVisible = false;
          this.form = {
            myorder: "",
            is_show: "",
            active_pos: "",
            title: "",
            tpic: "",
            content: "",
            active_time: "",
            active_status: "",
          };
        }
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    cancle () {
      this.dialogVisible = false;
      this.clearDesc = 1;
      this.form = {
        myorder: "",
        is_show: "",
        active_pos: "",
        title: "",
        tpic: "",
        content: "",
        active_time: "",
        active_status: "",
      };
    },
    //每页下拉显示数据
    async handleSizeChange (size) {
      try {
        this.list = await activityList({
          keywords: this.form.search,
          page: size,
        });
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //点击第几页
    async handleCurrentChange (currentPage) {
      try {
        this.list = await activityList({
          keywords: this.form.search,
          page: currentPage,
        });
      } catch (e) {
        this.$message.error(e.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.news_mrt {
  margin-bottom: 30px;
}
.left_w {
  width: 80%;
}
</style>